<template>
  <el-dialog :title="title" class="editPass" width="350px" :visible.sync="isDial" :before-close='closeDialog'>
    <el-form :model="form" size="mini" :rules='rules' ref="addDep">
        <el-form-item prop='belongToDep' label="所属部门" label-width="80px">
        <el-input v-model="form.belongToDep" :disabled="true" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item prop='depName' label="部门名称" label-width="80px">
        <el-input v-model="form.depName" class="leftBorder" autocomplete="off" maxlength="10" placeholder="请输入部门名称"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="addDep">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
    data(){
        return{
            form:{
                belongToDep:"",
                depName:"",
                parentId:''
            },
            isDial:false,
            title:'添加部门',
            depInfo:{},
            rules: {
                depName: [
                    {
                        pattern: /^[\s\S]*.*[^\s][\s\S]*$/,
                        required: true,
                        message: "部门名称不能为空",
                        trigger: "blur"
                    }
                ],
            }
        }
    },
    created(){
        this.$root.$on("addDep",(type,data)=>{
            let form=this.form
            form.belongToDep=data.parentName
            this.depInfo=data
            if(type=='add'){
                this.title='添加部门'
                
            }else{
                this.title='编辑部门'
                form.depName=data.name
            }
            this.isDial=true
        })
    },
    methods:{
        addDep(){
            let that=this
            let form=that.form
            this.$refs.addDep.validate(valid => {
                if(!valid){
                    return
                }
                let depInfo=this.depInfo
                let url='department'
                let params={
                    name:form.depName,
                    parentId:depInfo.parentId,
                    
                }
                let met='POST'
                if(this.title=='编辑部门'){
                    met='PUT'
                    params.id=depInfo.id
                    params.type=depInfo.type
                }
                request.ajaxPost({
                    url,
                    that,
                    type:met,
                    params,
                    fn(res) {
                        that.isDial=false
                        that.resetForm();
                        that.$root.$emit('saveDep','on')
                    }
                });
            })
        },
        resetForm() { //清空记录
            this.$refs['addDep'].resetFields();
        },
        closeDialog(){
            this.isDial=false
            this.resetForm();
        },
    }
};
</script>
<style lang="less" scoped>
.editPass{
    text-align: left;
    .dialog-footer{
        margin-top: -20px;
        .tips{
            float: left;
            font-size: 12px;
            color: #5E6D82;
            line-height: 28px;
        }
    }
    .info{
        margin-top: -20px;
        margin-bottom: 20px;
        span{
            margin-right: 20px;
            color: #5E6D82;
            font-size: 12px;
            font-weight: 600;
        }
    } 
    .el-dialog__body{
        padding: 0px 20px !important;
    }
}
</style>
